extends layout

block head
  link(
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous"
  )
  link(
    rel="stylesheet"
    href="public/stylesheets/sprite.css"
  )
  script(
    src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" 
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
    crossorigin="anonymous"
  )
  script(
    src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"
    crossorigin="anonymous"
  )
  script(
    src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"
  )
block content
  div(class="form-group")
    label(class="spriteName" for="exampleInputEmail3")="spriteName"
    input(type="text" class="form-control" id="spriteName" placeholder="默认：sprite")
  //- button(type="submit" class="btn btn-default")="登录"
  div(
    class="container"
  )
    div(
      id="dashboard"
      class="dashboard"
    )

  script.
    //监听拖拽放置区域拖拽事件
    var dashboard = document.getElementById("dashboard")
    dashboard.addEventListener("dragover", function (e) {
      e.preventDefault()
      e.stopPropagation()
    })
    dashboard.addEventListener("dragenter", function (e) {
      e.preventDefault()
      e.stopPropagation()
      console.log('enter')
      addEnterClass()
    })
    dashboard.addEventListener("dragleave", function (e) {
      e.preventDefault()
      e.stopPropagation()
      removeEnterClass();
    })
    dashboard.addEventListener("drop", function (e) {
      // 必须要禁用浏览器默认事件
      e.preventDefault()
      e.stopPropagation()
      removeEnterClass()
      var files = this.files || e.dataTransfer.files
      var formData = new FormData();
      ([]).slice.apply(files).forEach(function(file){
        formData.append(file.name,file);
      })
      uploadFile(formData)
    })

    function uploadFile(formData){
      var namespace = $('#spriteName').val();
      $.ajax({
        type : "post",
        url : '/sprite?command=upload&namespace='+namespace,
        data : formData,
        contentType : false,// 告诉jQuery不要去设置Content-Type请求头
        processData: false,// 告诉jQuery不要去处理发送的数据
        success : function(data) {
            //- alert(data.msg);
        },
        error : function() {
            alert("提交异常"); 
        }
      })
    }


    function removeEnterClass(){
      if(/enter/.test(dashboard.className)){
        dashboard.classList.remove('enter')
      }
    }
    function addEnterClass(){
      if(!/enter/.test(dashboard.className)){
        dashboard.classList.add('enter')
      }
    }

